<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>相关书籍</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{vendors/bootstrap-select/css/bootstrap-select.min.css}">


    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body>

<div id="page" class="site row">

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a th:href="@{/}">主页</a></li>
                        <li><a th:href="@{login}" th:if="${session.user == null}"><i class="fa fa-sign-in"></i> 登录 </a>
                        </li>
                        <li><a th:href="@{register}" th:if="${session.user == null}"><i class="fa fa-user"></i> 注册 </a>
                        </li>
                        <li><a th:href="@{personal_center}" th:if="${session.user != null}" class="mark-img"
                               data-spm-anchor-id="5176.12281949.0.0">
                            <img class="userPhoto" style="width: 22px; height: 22px; vertical-align: middle; margin-right: 10px;
                                        border-radius: 15px;" src="https://ucc.alicdn.com/avatar/avatar3.jpg">
                            <span th:text="${session.user.getName()}"></span>
                        </a>
                        </li>
                        <li><a th:href="@{login}" th:if="${session.user != null}">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!--Page Cover-->
        <section class="row page-cover" data-slide="assets/images/slide1.jpg">
            <div class="container">
                <h2 class="this-title">[[${param.search}]]
                    <span style="font-size:8px" th:if="${isMastered}">(已掌握)</span>
                    <span  class="tag-link-1" style="color: #ff6726 ;font-size:18px; cursor:pointer;"
                       th:if="${session.user!=null}" >&nbsp;收藏知识</span>
                </h2>
                <ol class="breadcrumb">
                    <li class="active">相关书籍</li>
                </ol>
            </div>
        </section>

    </header>

    <main id="contents" class="site-contnts">

        <!--Blogs-->
        <section class="row blog-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row comments">
                            <div id="book_detail" style="padding-bottom: 50px;">
                                <div class="media comment" th:each="book,bookStat:${books}"
                                     th:if="${bookStat.index} >= (${now_page}-1)*7 and ${bookStat.index} < ${now_page}*7 ">
                                    <div class="media-left">
                                        <a href="#" class="media-object">
                                            <img th:src="${book.getImg()}" th:alt="${book.getName()} ">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <div class="comment-body">
                                            <header class="comment-head">
                                                <h2 class="commenter-name" style='font-weight: bold'
                                                    th:text="${book.getName()}">
                                                    <img th:if="${bookStat.index}<3"
                                                         th:src="'assets/images/rank-'+${bookStat.index+1}+'.png'"/>
                                                    <strong th:if="${bookStat.index}>=3"
                                                            th:text="${bookStat.index+1}"></strong>

                                                </h2>
                                                <h6 class="comment-time">
                                                    <i class="fa fa-user"></i><span>作者</span>|<span
                                                        th:text="${book.getAuthor()}"></span>
                                                </h6>
                                            </header>
                                            <footer class="comment-foot">
                                                <p th:text="${book.getBookIntro()}"></p>
                                            </footer>
                                            <a th:href="'/book_detail?id='+${book.getId()}"
                                               class="reply-link btn-primary btn">详情</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="nav_page">
                                <nav class="pagination blog-pagination">
                                    <a id="prev" class="page-numbers prev">上一页</a>
                                    <a th:href="@{'/book?search='+${search}+'&page=1'}" class="page-numbers"
                                       th:if="${page_num} >=1">1</a>
                                    <a th:href="@{'/book?search='+${search}+'&page=2'}" class="page-numbers"
                                       th:if="${page_num} >=2">2</a>
                                    <a th:href="@{'/book?search='+${search}+'&page=3'}" class="page-numbers"
                                       th:if="${page_num} >=3">3</a>
                                    <a th:href="@{'/book?search='+${search}+'&page=4'}" class="page-numbers"
                                       th:if="${page_num} >=4">4</a>
                                    <a id="next" class="page-numbers next">下一页</a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: white">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>


</div>
<div class="modal fade" id="saveKnow" th:if="${session.user!=null}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h4 class="modal-title" align="center">收藏知识</h4>
                <br/>
                <div class="row" align="center">
                    <span class="recKnowledge" style="color: #c7254e"></span>
                </div>
                <div class="row">
                    <div style="height: 30px"></div>
                </div>
                <div class="row " align="center" th:each="tree:${trees}">
                    <div class="col-sm-12">
                        <span class="col-md-offset-1">第</span><span
                            th:text="${treeStat.index+1}"></span><span>棵知识树</span><span>&nbsp;&nbsp;&nbsp;</span><span
                            th:text="${tree.getKnows()[0]}"></span><span>...</span><span
                            th:text="${tree.getKnows()[tree.getKnows().size()-1]}"></span>
                        <span class="btn btn-default btn-primary saveKnow" th:if="${tree.getKnows().size()}<10"
                              th:tree="${treeStat.index+1}" th:sort="${tree.getKnows().size()+1}">收藏至此</span>
                        <span class="btn btn-default btn-primary" disabled
                              th:if="${tree.getKnows().size()}==10">已达上限</span>
                    </div>
                </div>
                <div class="row " align="center" th:if="${trees.size()}<5">
                    <div class="col-sm-12">
                        <span class="btn btn-default btn-primary saveKnow" th:tree="${trees.size()+1}"
                              sort="1">收藏至新知识树</span>
                    </div>
                </div>
                <br/>

            </div>
            <div class="modal-footer">
            </div>
        </div>
        <!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>
<script th:src="@{vendors/waypoint/waypoints.min.js}"></script>
<script th:src="@{vendors/couterup/jquery.counterup.min.js}"></script>
<script th:src="@{vendors/bootstrap-select/js/bootstrap-select.min.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>

<script type="text/javascript" th:inline="javascript" th:if="${session.user!=null}">
    $(function () {
        $(".tag-link-1").click(function () {
            $('.recKnowledge').text(($(".this-title").prop('firstChild').nodeValue).trim());
            $('#saveKnow').modal('show'); //显示模态框
        })
    });
    $(function () {
        $(".saveKnow").click(function () {
            tree = $(this).attr("tree");
            no = $(this).attr("sort");
            know = $('.recKnowledge').text();
            $.ajax({
                url: 'func/addKnowledge',
                type: 'post',
                data: {'tree': tree, 'know': know, 'no': no, 'userid': [[${session.user.getId()}]]},
                success: function (data) {
                    data = JSON.parse(data);
                    if (data.message === 200) {
                        location.reload();
                    }
                },
                error: function (data) {

                }
            });
            $('#saveKnow').modal('hide');
        })
    });
</script>

<script th:inline="javascript">
    $(function () {
        var page_num = [[${page_num}]];
        var now_page = [[${now_page}]];
        var pre_page = now_page - 1;
        var next_page = now_page + 1;
        if (pre_page < 1) {
            pre_page = 1;
        }
        if (next_page > page_num) {
            next_page = page_num;
        }
        $("#prev").attr('href', '/book?search=' + [[${search}]] + '&page=' + pre_page.toString());
        $("#next").attr('href', '/book?search=' + [[${search}]] + '&page=' + next_page.toString());
    });
</script>


</body>
</html>